<template>
	<div class="page list-page">
		<u-collapse v-if="list.length">
			<u-collapse-item v-for="(v, k) in list" :key="k">
				<view slot="title" class="item-hd">
					<o-row justify="between" class="o-row">
						<o-col span="18" class="o-col title">
							<text class="val">{{ v.productName }}</text>
						</o-col>
						<o-col span="6" class="o-col text-right tag">
							<u-tag plain size="mini" :text="v.storehouseName"></u-tag>
						</o-col>
					</o-row>
					<o-row justify="between" class="o-row">
						<o-col span="12" class="o-col">{{ v.productNameEn }}</o-col>
						<o-col span="12" class="o-col text-right">库存：{{ v.quantity + v.unit }}</o-col>
					</o-row>
				</view>
				<view class="item-bd">
					<o-row justify="between" class="o-row">
						<o-col span="12" class="o-col">成本单价(未税)：{{ v.costPriceNoTax || '--' }}</o-col>
						<o-col span="12" class="o-col text-right">成本单价(含税)：{{ v.costPriceTax || '--' }}</o-col>
					</o-row>
					<o-row justify="between" class="o-row">
						<o-col span="12" class="o-col">结算单价(未税)：{{ v.settlementPriceNoTax || '--' }}</o-col>
						<o-col span="12" class="o-col text-right">结算单价(含税)：{{ v.settlementPriceTax || '--' }}</o-col>
					</o-row>
					<o-row justify="between" class="o-row">
						<o-col span="12" class="o-col">总监权限单价(含税)：{{ v.directorPriceTax || '--' }}</o-col>
						<o-col span="12" class="o-col text-right">销售表价(含税)：{{ v.salesPriceTax || '--' }}</o-col>
					</o-row>
					<o-row justify="between" class="o-row">
						<o-col span="12" class="o-col">使用范围：{{ $enum.productType[v.productType * 1].text }}</o-col>
						<o-col span="12" class="o-col text-right">产品规则：{{ v.specName }}</o-col>
					</o-row>
					<o-row class="o-row">产品编号：¥{{ v.num }}</o-row>
					<o-row class="o-row">中文描述：{{ v.description }}</o-row>
				</view>
			</u-collapse-item>
		</u-collapse>
		<u-empty v-if="page >= 1 && !list.length" text="数据为空" mode="list"></u-empty>
		<u-loadmore v-else :status="loadStatus" />

		<u-popup v-model="popup.status" :mode="popup.mode" :length="popup.height" border-radius="10">
			<view class="popup-title">
				<view class="inner">查询条件</view>
			</view>
			<search :condition="condition" @oncancel="searchCancel" @onconfirm="search"></search>
		</u-popup>
	</div>
</template>

<script>
import oRow from '@/components/oveui-layout/o-row/o-row.vue';
import oCol from '@/components/oveui-layout/o-col/o-col.vue';
import search from './components/search.vue';
export default {
	components: { oRow, oCol, search },
	data: () => ({
		// 权限
		auth: {},
		authType: '',
		// 第几页
		page: 1,
		// 每页显示数量
		limit: 10,
		// 列表数据
		list: [],
		// 底部加载状态
		loadStatus: 'loadmore',
		// 弹窗信息
		popup: {
			status: false,
			mode: 'bottom',
			height: '400px',
		},
		// 查询条件
		condition: {},
	}),
	methods: {
		// 获取权限
		async getAuth() {
			let auth = uni.getStorageSync('authList');
			if (auth.crm) {
				this.auth = auth.psi[this.authType];
			}
		},
		// 获取列表
		async getList() {
			this.loadStatus = 'loading';
			let data = {
				...this.condition,
				page: this.page,
				limit: this.limit,
			};

			// 默认请求所有数据
			let methodName = 'list';
			let res = await this.$api.psi.storehouse.list(data);
			if (res.code == 200) {
				let list = res.data.list || [];
				if (this.page === 1) {
					this.list = list;
				} else {
					this.list.push(...list);
				}

				// list为空，说明没有更多数据了，显示没有更多数据的提示
				if (!list.length || (this.page == 1 && list.length <= res.data.totalRow)) {
					this.loadStatus = 'nomore';
				}
			}
		},
		// 取消搜索
		searchCancel() {
			this.condition = {};
			this.getList();
			this.popup.status = false;
		},
		// 搜索
		search(data) {
			this.page = 1;
			this.condition = data;
			this.getList();
			this.popup.status = false;
		},
		// 跳转
		// toPath(row) {
		// 	uni.navigateTo({
		// 		url: '/pages/customerManagement/quotationShow/quotationShow' + '?id=' + row.quotationId,
		// 	});
		// },
	},
	computed: {},
	watch: {},

	// 周期函数--监听页面加载
	onLoad(option) {
		this.authType = option.authType;
	},
	// 周期函数--监听页面初次渲染完成
	onReady() {},
	// 周期函数--监听页面显示
	onShow() {
		this.getAuth();
		this.getList();
	},
	// 周期函数--监听页面隐藏
	onHide() {},
	// 周期函数--监听页面卸载
	onUnload() {},
	// 页面处理函数--监听用户下拉动作
	async onPullDownRefresh() {
		this.page = 1;
		await this.getList();
		uni.stopPullDownRefresh();
	},
	// 页面处理函数--监听用户上拉触底
	async onReachBottom() {
		this.page++;
		await this.getList();
	},
	// 监听自定义标题栏按钮事件
	onNavigationBarButtonTap(e) {
		this.popup.status = !this.popup.status;
	},
	// 页面处理函数--监听页面滚动
	/* onPageScroll(event) {}, */
	// 页面处理函数--用户点击右上角分享
	/* onShareAppMessage(options) {}, */
};
</script>

<style lang="scss" scoped>
.u-collapse-item {
	position: relative;
	background: #fff;
	/deep/ .u-collapse-head {
		padding: 5px 0;
	}
	&:after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		background: #e4e7ed;
		transform: scaleY(0.5);
	}
	.item-hd {
		width: 100%;
		margin: 0 13px;

		.o-row {
			margin: 10px 0;
			color: $uni-color-subtitle;
			font-size: 12px;
		}
		.o-row:first-child {
			font-size: 14px;
		}
	}
	.item-bd {
		font-size: 14px;
		margin: 0 13px;
	}
	.o-row {
		margin: 8px 0;
		.o-col {
			.key,
			.val {
				display: inline-block;
				vertical-align: middle;
			}
		}

		.title {
			height: 18px;
			line-height: 18px;
			.val {
				max-width: 175px;
				height: 18px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
